window.onload = function () {
    let showshopcar = document.getElementsByClassName("showshopcar")[0];
    $.ajax({
        type: "post",
        url: "/js/shopCarGetLocal",
        data: null,
        dataType: "json",
        success: function (localshopcartea) {
            let shopcararr = JSON.parse(localshopcartea);
            let showPage = "";
            document.querySelector(".shoptop>div:nth-child(2)").innerHTML = `"${shopcararr[shopcararr.length - 1].teaname}"已添加至购物车`;
            if (shopcararr == "" || shopcararr == null || shopcararr == undefined || shopcararr == []) {
                showPage += `
                    <div style="width:700px;heigth:90px">
                        <button style="heigth:50px;width:100px;margin:auto;line-hight:50px;text-align:center;colore:white;">前往购物</button>
                    </div>
                `
            } else {
                for (let i = 0; i < shopcararr.length; i++) {
                    showPage += `
                        <div class="shopcarobj" id="div${i + 1}">
                        <div><button onclick="deleteTea(${i})">删除</button></div>
                        <div><img src="../imgs/${shopcararr[i].teaimg}" alt=""></div>
                        <div>${shopcararr[i].teaname}</div>
                        <div class="shopcarteaprice">${shopcararr[i].teaprice}</div>
                        <div class="shopnuminput">
                            <button>-</button>
                            <input type="text" class="inp" value="1">
                            <button>+</button>
                        </div>
                        <div class="sum">${shopcararr[i].teaprice}</div>
                        </div>
                    
                    `
                }
                showshopcar.innerHTML = showPage;
            }

            // 获取页面中的标签
            let showdivlist = document.querySelectorAll(".showshopcar>div");
            console.log(showdivlist);
            let shopcarteapricelist = document.getElementsByClassName("shopcarteaprice");
            for (let i = 0; i < showdivlist.length; i++) {
                fun(showdivlist[i].id, shopcarteapricelist[i].innerHTML, i);
                sum();
            }
            function fun(divid, teaprice, xiaoji) {
                let divobj = document.getElementById(divid);
                let buttonlist = divobj.querySelectorAll(".shopnuminput>button");
                // 茶叶数量
                let teanum = divobj.querySelector(".shopnuminput>input");
                // 小计
                let teaxiaoji = document.getElementsByClassName("sum")[xiaoji];
                // 减法
                buttonlist[0].onclick = function () {
                    // 获取input里的value值
                    let inputvalue = teanum.value;
                    if (inputvalue > 1) {
                        inputvalue--;
                        teanum.value = inputvalue;
                        // 计算小计
                        teaxiaoji.innerHTML = Number(teaprice) * inputvalue;
                        // 计算总价跟总件数
                        sum();

                    } else {
                        alert("商品不能低于一个");
                    }
                }
                // 加法
                buttonlist[1].onclick = function () {
                    // 获取input里的value值
                    let inputvalue = teanum.value;
                    inputvalue++;
                    teanum.value = inputvalue;
                    // 计算小计
                    teaxiaoji.innerHTML = Number(teaprice) * inputvalue;
                    // 计算总价跟总件数
                    sum();

                }
                //给input输入框添加失去焦点事件
                teanum.onblur = function () {
                    let inpvalue = this.value;
                    // 计算小计
                    teaxiaoji.innerHTML = Number(teaprice) * inpvalue;
                    // 计算总价跟总件数
                    sum();
                }

            }
            function sum() {
                //声明计算总件数跟总价的全局变量
                let sumprice = 0;
                let sumcont = 0;
                let pricelist = document.querySelectorAll(".sum");
                let teanumlist = document.querySelectorAll(".shopcarobj .shopnuminput>input");
                for (let i = 0; i < pricelist.length; i++) {
                    // 总价格
                    sumprice += parseInt(pricelist[i].innerHTML);
                    // 总件数
                    sumcont += parseInt(teanumlist[i].value);
                }
                document.querySelector(".xiaoji span:nth-child(2)").innerHTML = "￥" + sumprice;
                document.querySelector(".zongji>span:nth-child(2)").innerHTML = "￥" + sumprice;

            }


        }
    })
}
function deleteTea(index) {
    console.log(index);

    let shopcararr = JSON.parse(localStorage.shopCar);
    console.log(shopcararr);
    let bool = confirm("是否删除此商品？");
    if (bool) {
        shopcararr.splice(index, 1);
        alert("删除成功");
    } else {
        alert("已取消删除");
    }
    localStorage.shopCar = JSON.stringify(shopcararr);
    window.location.reload();


}
